<template>
  <view class="container">
    <view class="content" v-if="commentList.length > 0">
      <view class="comment" v-for="(item, index) in commentList" :key="item.id">
        <view class="left"><u-avatar :src="item.user.avatar" size="64" /></view>
        <view class="right">
          <view class="top">
            <view class="name">{{ getUsername(item.user) }}</view>
            <view class="floor">{{ commentList.length - index }}楼</view>
          </view>
          <view class="content">{{ item.content }}</view>
          <view class="bottom">{{ item.create_time }}</view>
        </view>
      </view>
      <u-loadmore :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="100" @loadmore="loadMore" />
    </view>
    <view class="empty-box" v-else><u-empty text="~赶快来评论吧~" mode="message" /></view>
    <div class="bottom-box">
      <u-search shape="square" placeholder="发表评论" action-text="发送" search-icon="chat" margin="0 10rpx 0 20rpx" v-model="content" @search="send" @custom="send"></u-search>
    </div>
    <u-back-top :scroll-top="scrollTop" />
    <u-toast ref="uToast" />
    <!-- 断网提示 -->
    <u-no-network />
  </view>
</template>

<script>
export default {
  data() {
    return {
      articleId: null,
      commentList: [],
      page: 1,
      status: 'loading',
      scrollTop: 0,
      content: '',
      loading: false
    };
  },
  onLoad(options) {
    this.articleId = options.articleId;
    this.getComment();
  },
  onPullDownRefresh() {
    this.iniData();
  },
  onReachBottom() {
    this.loadMore();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    // 重新加载数据
    iniData() {
      this.page = 1;
      this.commentList = [];
      this.getComment();
    },
    // 加载更多
    loadMore() {
      if (this.status === 'loadmore') {
        this.getComment();
      }
    },
    // 评论列表
    getComment() {
      this.status = 'loading';
      this.$api.get({
        url: 'user/comments',
        data: {
          object_id: this.articleId,
          table_name: 'portal_post',
          page: `${this.page},15` // 一页显示15条
        },
        success: res => {
          // 分页判断
          if (res.code == 1) {
            let commentList = res.data.list;
            this.commentList = this.commentList.concat(commentList);
            if (commentList.length < 15) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
              this.page++;
            }
          }
        },
        complete: () => {
          uni.stopPullDownRefresh();
        }
      });
    },
    // 判断用户名
    getUsername(user) {
      if (user.user_nickname) {
        return user.user_nickname;
      }
      if (user.mobile) {
        return `${user.mobile.slice(0, 3)}****${user.mobile.slice(7, 11)}`;
      }
      if (user.user_email) {
        return user.user_email;
      }
      return '匿名用户';
    },
    // 发表评论
    send() {
      if (this.$isLogin(true)) {
        if (this.content === '') {
          this.$refs.uToast.show({
            title: '请输入评论内容',
            type: 'warning'
          });
          return;
        }
        // 防止连续请求
        if (this.loading) {
          return;
        }
        this.loading = true;
        this.$api.post({
          url: 'user/comments/setComments',
          data: {
            object_id: this.articleId,
            table_name: 'portal_post',
            url: `portal/Article/index?id=${this.articleId}`,
            content: this.content
          },
          success: res => {
            if (res.code == 1) {
              this.iniData();
              this.content = '';
              this.$refs.uToast.show({
                title: res.msg,
                type: 'success'
              });
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          },
          complete: () => {
            this.loading = false;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.comment {
  display: flex;
  padding: 30rpx;
  .right {
    flex: 1;
    padding-left: 20rpx;
    font-size: 30rpx;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;
      .name {
        color: #5677fc;
      }
      .floor {
        font-size: 22rpx;
        margin-right: 4rpx;
        color: #9a9a9a;
      }
      .highlight {
        color: #5677fc;
        .num {
          color: #5677fc;
        }
      }
    }
  }
  .bottom {
    margin-top: 20rpx;
    display: flex;
    font-size: 24rpx;
    color: #9a9a9a;
  }
}
.bottom-box {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 90rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
}
</style>
